<template>
	<view class="order-detail-header">
		<view class="status--wrap">
			<image class="img" :src="orderInfo.orderStatus | starusImg" />	
			<view class="title">
				{{ORDER_STATUS_NAME[orderInfo.orderStatus]}}				
			</view>	
		</view>		
		<view class="row orderNo">
			<basic-label-value label="订单号" :value="orderInfo.orderNo" color="#FFF" size="28rpx" />
			<image class="img" src="https://imgs.bestwehotel.com/images/inn/1bqUQwbTkT" @click="copyOrderNo" />
		</view>
		<view class="row price-wrap">
			<view>
				<text class="label">
				  订单实付金额:					
				</text>
				<basic-price :price="orderInfo.orderAmount" color="#FFF" size="28rpx"/>		
			</view>
			<view @click="showCostDetail">
				交易明细
				<basic-icons name="icon-arrow-right" size="20rpx" color="#fff" />
			</view>
		</view>
	</view>
</template>
<script>
// import basic-label-value from '../../../components/label-value'
import { ORDER_STATUS_NAME } from '@/model/enum'
import sdk from 'sdk'
export default {
	name: 'order-header',
	// components: { basic-label-value },
	props: {
		orderInfo: { type: Object, default:()=>{} }
	},
	data() {
		return {
			ORDER_STATUS_NAME
		}
	},
	filters: {
		starusImg(status){
			if([1001].indexOf(status) > -1) {// 待支付
			    return 'https://imgs.bestwehotel.com/images/inn/1bqUOGqNrV'
			}
			if([1002,1003].indexOf(status) > -1) {// 待出行
			    return 'https://imgs.bestwehotel.com/images/inn/1bqUOZueFA'
			}
			if([1005].indexOf(status) > -1) {// 已完成
			    return 'https://imgs.bestwehotel.com/images/inn/1bqUP8iv2j'
			}
			if([1004, 2001, 4001, 4002, 4003, 4004, 4005, 4006 ].indexOf(status) > -1) {// 取消/退款			
			    return 'https://imgs.bestwehotel.com/images/inn/1bqUPJdujk'
			}
		}
	},
	methods: {
		copyOrderNo() {
			sdk.setClipboardData(this.orderInfo.orderNo).then(res=>{
				sdk.showToast({
					icon: 'none',
					title: '复制成功'
				})
			})			
		},
		showCostDetail() {
			this.$emit('showCostDetail')			
		}
	}
}
</script>
<style lang="less">
.order-detail-header{
	padding: 24rpx 26rpx 0;
	position: relative;
	.status--wrap{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		.img{
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
		}
		.title{
			color: #fff;
			font-size: 48rpx;
		}
	}
	.row{
		display: flex;
		flex-direction: row;
		color: #fff;
		font-size: 28rpx;
	}
	.orderNo{
		padding: 20rpx 0;
		align-items: center;
		.img{
			height: 24rpx;
			width: 24rpx;
			margin-left: 10rpx;
		}
	}
	.price-wrap{
		justify-content: space-between;
		line-height: 100rpx;
		border-top: 1px solid rgba(212, 212, 212, .3);
		.label{
			margin-right: 20rpx;
		}
	}
}
</style>